<template>
	<view class="content">
		<!-- F1: 轮播广告 —— uni-app内置组件：swiper -->
		<!-- indicator-dots：指示器小圆点是否显示 -->
		<!-- autoplay：是否自动轮播 -->
		<!-- interval：间隔，两个广告间的停留时间 -->
		<!-- duration：持续时间，指一个广告切换动画时长 -->
		<!-- indicator-color：指示器的颜色 -->
		<!-- indicator-active-color：指示器激活状态的颜色 -->
		<swiper indicator-active-color="#090" indicator-color="#f2f2f2" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
			<swiper-item v-for="(c, i) in carousels" :key="i">
				<view class="swiper-item">
					<image :src="base+c.pic" mode="widthFix" @click="jump(c.href)"/>
				</view>
			</swiper-item>
		</swiper>
		<!-- <text>BASE: {{base}}</text> -->
		<!-- <text>{{carousels}}</text> -->
		
		<!-- F2: 八宫格功能菜单 -->
		<!-- uni-grid -->
		
		<!-- F3: 商业服务 -->
		
		<!-- F4: 社区活动 -->
		<!-- uni-list -->
	</view>
</template>

<script>
	import { indexData, base } from '@/service'
	export default {
		data() {
			return {
				base,				//把服务器基地址上升为模型变量
				carousels: [],		//轮播广告数据
				menuItems: [],		//应用菜单里的条目数据
				activities: [],		//社区活动数据
			}
		},
		//生命周期方法——页面挂载完成，功能类似于组件里的mounted方法
		async onLoad() {
			//弹出吐司对话框，欢迎回来
			uni.showToast({
				title: '欢迎回来',
				duration: 3000, //显示持续时长
				icon: 'none', //取消图标
			})
			//异步请求当前页面必需的动态数据
			let data = await indexData()
			console.log(data);
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.swiper-item {
		image {
			width: 100%;
		}
	}
</style>
